<!--
 @description:表详情
 @author: mfish
 @date: 2023/4/4 19:13
-->
<template>
  <PageWrapper :title="`数据表：${curNode?.tableName?.toUpperCase()}`" contentBackground contentFullHeight fixedHeight>
    <template #extra>
      <slot name="button"></slot>
    </template>
    <template #footer>
      <a-tabs default-active-key="1" @change="changeTab">
        <a-tab-pane key="1" tab="基本信息" />
        <a-tab-pane key="2" tab="数据预览" />
      </a-tabs>
    </template>
    <div class="pt-2 m-6 desc-wrap" v-if="curTab === '1'">
      <a-descriptions size="small">
        <a-descriptions-item label="描述"
          >{{ curNode?.tableComment ? curNode?.tableComment : "无" }}
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions title="字段信息" class="mt-4"></a-descriptions>
      <BasicTable @register="registerFieldTable" />
    </div>
    <div class="pt-2 m-6 desc-wrap" v-else>
      <BasicTable @register="registerDataTable" />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { ref, watch, onMounted, computed, nextTick, ComputedRef } from "vue";
  import { BasicColumn, BasicTable, TableActionType, useTable } from "/@/components/general/Table";
  import { PageWrapper } from "/@/components/general/Page";
  import { Descriptions, Tabs } from "ant-design-vue";
  import { ReqTable, TableInfo } from "/@/api/sys/model/DbConnectModel";
  import { getDataTable, getFieldList } from "/@/api/sys/DbConnect";
  import { columns } from "/@/views/sys/database/tableInfo.data";

  export default {
    name: "TableDetail",
    components: {
      BasicTable,
      PageWrapper,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane
    },
    props: {
      curNode: Object as () => TableInfo
    },
    setup(props) {
      const curTab = ref("1");
      const changeTab = (tab) => {
        curTab.value = tab;
        setValue();
      };
      const dataTableRef = ref<Nullable<TableActionType>>(null);

      const [registerFieldTable, { setTableData, setLoading: fieldLoading }] = useTable({
        columns,
        bordered: true,
        showIndexColumn: false,
        pagination: false
      });
      const condition: ComputedRef<ReqTable> = computed(() => {
        const curKey = props.curNode?.key;
        if (curKey) {
          const values = curKey.split(",");
          const connectId = values[0];
          const tableName = values[1];
          return { connectId, tableName };
        }
        return { connectId: "" };
      });
      const [registerDataTable, { setColumns, setTableData: setDataTable, setPagination, setLoading: tableLoading }] =
        useTable({
          bordered: true,
          showIndexColumn: false,
          onChange: buildTableData
        });
      watch(
        () => props.curNode?.key,
        () => {
          setValue();
        }
      );

      function setValue() {
        if (curTab.value === "1") {
          setFields();
          return;
        }
        buildTableData(undefined);
      }

      async function buildTableData(page) {
        await nextTick();
        tableLoading(true);
        let pageNum = 1;
        let pageSize = 10;
        if (page) {
          pageNum = page.current;
          pageSize = page.pageSize;
        }
        getDataTable({ ...condition.value, pageNum, pageSize })
          .then((res) => {
            let columns: BasicColumn[] = [];
            Object.keys(res.header).forEach((key) => {
              columns.push({
                title: key,
                dataIndex: key
              });
            });
            setColumns(columns);
            setDataTable(res.table.list);
            setPagination({
              total: res.table.total,
              pageSize: res.table.pageSize,
              current: res.table.pageNum
            });
          })
          .catch(() => {
            setColumns([]);
          })
          .finally(() => {
            tableLoading(false);
          });
      }

      onMounted(() => {
        setFields();
      });

      async function setFields() {
        await nextTick();
        if (!condition.value.connectId) {
          setTableData([]);
          return;
        }
        fieldLoading(true);
        getFieldList({ ...condition.value, pageNum: 1, pageSize: 10000 })
          .then((res) => {
            setTableData(res.list);
          })
          .catch(() => {
            setTableData([]);
          })
          .finally(() => {
            fieldLoading(false);
          });
      }

      return {
        curTab,
        changeTab,
        registerFieldTable,
        registerDataTable,
        dataTableRef
      };
    }
  };
</script>

<style scoped></style>